<template>
	<div id="app" :class="flag ? 'grayStyle' : ''" style="--current-color: #930b0b">
		<router-view />
	</div>
</template>
<script>
export default {
	data() {
		return {
			flag: false
		};
	},
	mounted() {
		this.$store.dispatch('setwebinfo');
		this.$store.dispatch('friendLink');
		this.getTheme();
		this.getGrapSite();
		this.getHomeConfig();
		document.title = this.$store.getters.webName || '红色资源管理平台';
		let $favicon = document.querySelector('link[rel="icon"]');
		$favicon.href = this.$store.getters.webFavicon;
	},
	methods: {
		async getTheme() {
			//前台主题色
			let themeHome = await this.$store.dispatch('getDictionaryVal', 'THEME_ACTIVE_HOME');
			let arr1 = themeHome[0].split(',');
			document.documentElement.style.setProperty('--colorH1', arr1[0]);
			document.documentElement.style.setProperty('--colorH2', arr1[1]);
			//后台主题色
			let { userId } = this.$store.getters;
			var themeAdmin = '#930b0b,#d41616';
			if (userId) {
				let localKey = 'themeAdmin' + this.$store.getters.userId;
				themeAdmin = this.getLocal(localKey) || '#930b0b,#d41616';
			}
			let arr2 = themeAdmin.split(',');
			document.documentElement.style.setProperty('--colorA1', arr2[0]);
			document.documentElement.style.setProperty('--colorA2', arr2[1]);
		},
		//网站置灰
		async getGrapSite() {
			let res = await this.$store.dispatch('getDictionaryVal', 'GRAY_SITE');
			this.flag = res[0] == 1;
		},
		//首页配置
		getHomeConfig() {
			this.$store.dispatch('getHomeConfig');
		}
	}
};
</script>
<style>
* {
	margin: 0;
	padding: 0;
	list-style: none;
}
</style>
<style lang="scss">
.grayStyle {
	-webkit-filter: grayscale(100%); /* webkit */
	-moz-filter: grayscale(100%); /*firefox*/
	-ms-filter: grayscale(100%); /*ie9*/
	-o-filter: grayscale(100%); /*opera*/
	filter: grayscale(100%);
	filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
	filter: gray; /*ie9- */
}

.el-aside {
	background-color: transparent !important;
}
.el-radio__input.is-checked .el-radio__inner,
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
	background-color: var(--colorA1) !important;
	border-color: var(--colorA1) !important;
}
.el-radio__input.is-checked + .el-radio__label,
.el-link.el-link--default:hover,
.el-checkbox__input.is-checked + .el-checkbox__label {
	color: var(--colorA1) !important;
}
.search {
	.el-checkbox__input.is-checked .el-checkbox__inner,
	.el-checkbox__input.is-indeterminate .el-checkbox__inner {
		background-color: #f6c131 !important;
		border-color: #f6c131 !important;
	}
	.el-checkbox__input.is-checked + .el-checkbox__label,
	.el-checkbox {
		color: #fff !important;
	}
	.el-checkbox {
		margin-right: 26px;
	}
	.el-checkbox__label {
		font-size: 16px;
	}
}

.el-checkbox__inner:hover,
.el-checkbox__input.is-focus .el-checkbox__inner {
	border-color: var(--colorA1) !important;
}
.el-input.is-active .el-input__inner,
.el-input__inner:focus {
	border-color: #666 !important;
}
.el-tabs__item:hover,
.el-tabs__item.is-active {
	color: var(--colorA1) !important;
}
.el-tabs__active-bar {
	background-color: var(--colorA1) !important;
}

.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
	background-color: var(--colorHover1) !important;
	color: var(--colorA1) !important;
}
.el-menu--horizontal > .el-menu-item.is-active {
	border-bottom: 2px solid var(--colorH1) !important;
}
</style>
